<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="this.form.data.revokeSignUp === 0 ? '取消报名' : '恢复报名'"
    ok-text="确认"
    @on-ok="ok">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :label-width="150">
         <Row>
            <Col span="24">
              <h2 style="text-align:center">报名人员信息</h2>
            </Col>
         </Row>
         <Row>
            <Col span="12">
              <FormItem prop="realName" label="姓名">
                {{actSiguUp.realName}}
              </FormItem>
              <FormItem prop="sexName" label="性别">
                {{actSiguUp.sexName}}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="mobile" label="手机号">
                {{actSiguUp.mobile}}
              </FormItem>
              <FormItem prop="cardTypeName" label="证件类型">
                {{actSiguUp.cardTypeName}}
              </FormItem>
            </Col>
         </Row>
         <Row>
            <Col span="12">
              <FormItem prop="idCard" label="证件号码">
                {{actSiguUp.idCard}}
              </FormItem>
              <FormItem prop="signRclubName" label="俱乐部名称">
                {{actSiguUp.signRclubName}}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="groupName" label="是否队长">
                {{actSiguUp.pkCaptain === 0 ? '是' : '否'}}
              </FormItem>
             <FormItem prop="groupName" label="报名组别">
                {{actSiguUp.groupName}}
              </FormItem>
            </Col>
         </Row>
         <Row>
           <Col span="12">
              <FormItem prop="teamName" label="组队名称">
                {{actSiguUp.teamName}}
              </FormItem>
              <FormItem prop="emeryContact" label="紧急联系人">
                {{actSiguUp.emeryContact}}
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem prop="signUpTime" label="报名时间">
                {{actSiguUp.signUpTime | formatDate('YYYY-MM-DD HH:mm:Ss')}}
              </FormItem>
              <FormItem prop="emeryMobile" label="联系人手机">
                {{actSiguUp.emeryMobile}}
              </FormItem>
            </Col>
         </Row>
         <Row>
            <Col span="12">
              <FormItem prop="emeryRealationName" label="联系人关系">
                {{actSiguUp.emeryRealationName}}
              </FormItem>
            </Col>
         </Row>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'
  import activityApi from '@/api/activity'

  export default {
    name: 'signup-modal',
    props: [
      'form'
    ],
    components: {
    },
    data () {
      return {
        loading: true,
        actGroupLoading: false,
        actSiguUp: {}
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.onCancelPay()
          }
        })
      },
      onClose (isVisible) {
        if (isVisible) {
          this.detailSignUp()
        }
      },
      closeModal () {
        this.form.visible = false
      },
      async onCancelPay () {
        this.$Modal.confirm({
          title: this.form.data.revokeSignUp === 0 ? '确认取消报名' : '确认恢复报名' + '吗',
          // content: '<p>取消报名，确定取消？</p>',
          onOk: () => {
            this.sumbit()
          },
          onCancel: () => {
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      async sumbit () {
        const { body } = await activityApi.signup.updateRevokeSignUp({
          pkActSign: this.form.data.pkActSign,
          revokeSignUp: this.form.data.revokeSignUp === 0 ? 1 : 0 // 此处修改报名的状态。当状态为已报名时，上传取消报名的标志位。反之一样
        })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info(this.form.data.revokeSignUp === 0 ? '取消' : '恢复' + '报名成功')
          this.form.visible = false
          this.$emit('submit')
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
            this.loading = false
          }, 500)
        }
      },
      async detailSignUp () {
        this.actGroupLoading = true
        const { body } = await activityApi.signup.detailSignUp({
          pkActSign: this.form.data.pkActSign
        })
        this.actSiguUp = body.responseData
        this.actGroupLoading = false
      }
    },
    mounted () {
    }
  }
</script>
